<template>
  <div class="user-order-list">
    <div class="user-com-title" style="margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">{{$t('page.index.MyOrder')}}</div>
    <div class="user-com-tab">
      <div style="display: flex;">
      <!-- <div class="MyOrder item" style="" :class='orderStatus==-1 ? "on": ""' @click="bindTab(-1)">{{$t('page.user.allorders')}}({{orderData.all || 0}})</div> -->
      <span class="item MyOrder" :class='orderStatus==-1 ? "on": ""' @click="bindTab(-1)">{{$t('page.user.allorders')}}({{orderData.all || 0}})</span>
      <span class="item MyOrder" :class='orderStatus==0 ? "on": ""' @click="bindTab(0)">{{$t('page.user.orderStatus[0].name')}}({{orderData.noPay || 0}})</span>
      <span class="item MyOrder" :class='orderStatus==1 ? "on": ""' @click="bindTab(1)">{{$t('page.user.orderStatus[1].name')}}({{orderData.noPostage || 0}})</span>
      <span class="item MyOrder" :class='orderStatus==2 ? "on": ""' @click="bindTab(2)">{{$t('page.user.orderStatus[2].name')}}({{orderData.noDeliver || 0}})</span>
      <span class="item MyOrder" :class='orderStatus==3? "on": ""' @click="bindTab(3)">{{$t('page.user.orderStatus[3].name')}}({{orderData.noComment || 0}})</span>
      <span class="item MyOrder" :class='orderStatus==4? "on": ""' @click="bindTab(4)">{{$t('page.user.orderStatus[5].name')}}({{orderData.done || 0}})</span>
      </div>
    </div>
    <div v-if="orderList.length > 0" class="order-list">
      <ul v-if="orderStatus !== 0">
        <li v-for="(item,index) in orderList" :key="index">
          <div class="bd">
            <div class="order-txt">
              {{$t('page.users.orderList.date')}}: {{item.create_time}}
              <nuxt-link class="mer_name" :to="{path:'/store',query:{id:item.mer_id}}">{{item.merchant.mer_name}}</nuxt-link>
              <span v-if="item.status == 4" class="status">{{$t('page.user.orderStatus[0].name')}}</span>
              <span v-else-if="item.status == 0" class="status">{{$t('page.user.orderStatus[1].name')}}</span>
              <span v-else-if="item.status == 1" class="status">{{$t('page.user.orderStatus[2].name')}}</span>
              <span v-else-if="item.status == 2" class="status">{{$t('page.user.orderStatus[3].name')}}</span>
              <span v-else-if="item.status == 3" class="status">{{$t('page.user.orderStatus[5].name')}}</span>
              <span v-else-if="item.status == -1" class="status">{{$t('page.users.userReturnList.refunded')}}</span>
            </div>
            <div class="content" @click="goDetail(item)">
              <div v-for="(goods, index) in item.orderProduct" :key="index">
                <div v-if="item.activity_type === 2" class="goods-item">
                    <div class="img-box">
                      <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                      <span >{{$t('page.index.presale')}}</span>
                    </div>
                    <div class="info-txt">
                      <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                      <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                      <div class="price" v-if="goods.cart_info.productPresellAttr.presell_price">$ {{ goods.cart_info.productPresellAttr.presell_price}}</div>
                      <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>
                      <div class="develity_date">
                        <!--全款预售-->
												<span v-if="goods.cart_info.productPresell.presell_type === 1">
													{{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.asuccessfulpay') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
												</span>
												<!--定金预售-->
												<span v-if="goods.cart_info.productPresell.presell_type === 2">
                          {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.afterpayingthebalance') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                        </span>
                      </div>
                    </div>
                    <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                    <span class="num">x{{ goods.product_num }}</span>
                </div>
                <div v-else class="goods-item">
                    <div class="img-box">
                      <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                    </div>
                    <div class="info-txt">
                      <!-- <div class="title line2">{{goods.cart_info.product.store_name}}</div> -->
                      
                        <div class="title line2" v-if="types == 'one'||types == undefined">{{goods.cart_info.product.store_name_en}}</div>
                        <div class="title line2" v-if="types == 'two'">{{goods.cart_info.product.store_name}}</div>
                        <div class="title line2" v-if="types == 'three'">{{goods.cart_info.product.store_name_tw}}</div>
                        <div class="title line2" v-if="types == 'four'">{{goods.cart_info.product.store_name_th}}</div>
                        <div class="title line2" v-if="types == 'five'">{{goods.cart_info.product.store_name_ja}}</div>
                        <div class="title line2" v-if="types == 'six'">{{goods.cart_info.product.store_name_vi}}</div>
                        <div class="title line2" v-if="types == 'seven'">{{goods.cart_info.product.store_name_id}}</div>
                        <div class="title line2" v-if="types == 'eight'">{{goods.cart_info.product.store_name_hi}}</div>
                        <div class="title line2" v-if="types == 'nine'">{{goods.cart_info.product.store_name_tr}}</div>
                        <div class="title line2" v-if="types == 'ten'">{{goods.cart_info.product.store_name_ar}}</div>
                        <div class="title line2" v-if="types == 'eleven'">{{goods.cart_info.product.store_name_ko}}</div>
                      <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                      <div class="price" v-if="goods.cart_info.productAttr.price">$ {{ goods.cart_info.productAttr.price }}</div>
                      <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>

                    </div>
                    <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                    <span class="num">x{{ goods.product_num }}</span>
                </div>

              </div>
            </div>
          </div>
          <div class="foot">
            <p>{{ item.total_num || 0 }} {{$t('page.orderDetails.item')}} ，{{$t('page.users.orderList.totalPay')}} <span class="price">${{ item.pay_price }} </span>
            <span v-if="item.pay_postage > 0">({{$t('page.index.includingshipping')}}{{item.pay_postage}})</span>
            </p>
            <div class="btn-wrapper">
              <div class="rest" v-if="item.status == 3" @click="goOrderConfirm(item)">{{$t('page.orderDetails.again')}}</div>
              <div class="pay" v-if="item.status == 2" @click="goDetail(item)">{{$t('page.users.orderList.evaluation')}}</div>
              <div class="rest" v-if="item.status == 1 && (item.delivery_type == 1)" @click="goLogistics(item)">{{$t('page.orderDetails.logistics')}}</div>
              <div class="pay" v-if="item.status == 1" @click="confirmOrder(item,index)">{{$t('page.orderDetails.confirm')}}</div>
              <div class="pay" @click="goDetail(item)">{{$t('page.users.orderList.viewDetails')}}</div>
            </div>
          </div>
        </li>
      </ul>
      <ul v-else-if="orderStatus == 0">
        <li v-for="(item,index) in orderList" :key="index">
          <div class="bd">
            <div class="order-txt">
              {{$t('page.users.orderList.date')}}: {{item.create_time}}
              <span class="status">{{$t('page.user.orderStatus[0].name')}}</span>
            </div>
            <div class="content" @click="goDetail(item)">
              <div v-for="(order, j) in item.orderList" :key="order.order_id+j">
                  <div v-for="(goods,g) in order.orderProduct" :key="g">
                    <div v-if="order.activity_type === 2" class="goods-item">
                      <div class="img-box" v-if="goods.cart_info.productAttr.image">
                        <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                        <span >{{$t('page.index.presale')}}</span>
                      </div>
                      <div class="info-txt">
                        <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                        <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                        <div class="price" v-if="goods.cart_info.productAttr.price">$ {{ goods.cart_info.productAttr.price }}</div>
                        <div class="price" v-else>$ {{ goods.cart_info.productPresellAttr.presell_price }}</div>
                        <div class="develity_date">
                        <!--全款预售-->
												<span v-if="goods.cart_info.productPresell.presell_type === 1">
													{{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.asuccessfulpay') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
												</span>
												<!--定金预售-->
												<span v-if="goods.cart_info.productPresell.presell_type === 2">
                          {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.afterpayingthebalance') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                        </span>
                      </div>

                      </div>
                      <span class="num">x{{ goods.product_num }}</span>
                    </div>
                    <div v-else class="goods-item">
                      <div class="img-box" v-if="goods.cart_info.productAttr.image">
                        <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                      </div>
                      <div class="info-txt">
                        <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                        <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                        <div class="price" v-if="goods.cart_info.productAttr.price">$ {{ goods.cart_info.productAttr.price }}</div>
                        <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>

                      </div>
                      <span class="num">x{{ goods.product_num }}</span>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="foot">
            <p>共{{ item.total_num || 0 }}{{$t('page.orderDetails.item')}}，{{$t('page.users.orderList.totalPay')}}  <span>${{ item.pay_price }} </span>
            </p>
            <div class="btn-wrapper">
              <div class="rest" @click="cancelOrder(item,index)">{{$t('page.orderList.cancelOrder')}}</div>
              <div class="pay" @click="goBuy(item)">{{$t('page.index.payimmediately')}}</div>
              <div class="pay" @click="goDetail(item)">{{$t('page.users.orderList.viewDetails')}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="pages-box" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="bindPageCur"
          :total="total">
        </el-pagination>
      </div>
      <div class="empty-box" style="width: 800px; padding-top:150px;" v-if="orderList.length == 0">
        <img src="~assets/images/noorder.png" alt="">
        <p>{{$t('page.index.Noorder')}}</p>
      </div>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {Message, MessageBox} from "element-ui";
export default {
    name: "orderList",
    auth: "guest",
    scrollToTop: true,
    data() {
      return {
        types:'',
        tabCur: '',
        tabList: [
          {
            title: this.$t('page.user.allorders'),
            key: '-2'
          },
          {
            title: this.$t('page.user.orderStatus[0].name'),
            key: '0',
            numberName: 'unpaid_count'
          },
          {
            title: this.$t('page.user.orderStatus[1].name'),
            key: '0',
            numberName: 'unshipped_count'
          },
          {
            title: this.$t('page.user.orderStatus[2].name'),
            key: '1',
            numberName: 'received_count'
          },
          {
            title: this.$t('page.index.tocomment'),
            key: '2',
            numberName: 'evaluated_count'
          }
        ],
        orderList: [
        ],
        orderData: {},
        orderStatus: -1,
        total:0,
        page: 1,
        limit: 10
      }
    },
    fetch({ store }) {
      store.commit("isBanner", false);
      store.commit("isHeader", true);
      store.commit("isFooter", true);
    },
    head() {
      return {
        title: this.$t('page.users.orderList.navTitle') + "-"+this.$store.state.titleCon
      }
    },
    beforeMount(){
    },
  mounted() {
    this.types = this.$cookies.get("type");
      Promise.all([this.getList(), this.getNumber()])
    },
    methods: {
      //  再次购买
      goOrderConfirm(order) {
        const data = order.orderProduct.map(pro => {
          return {
            cart_num: pro.product_num,
            product_attr_unique: pro.product_sku,
            product_id: pro.product_id
          }
        });
        let that = this;
        that.$axios
          .post("/api/user/cart/again", {
            data
          })
          .then(res => {
            that.$router.replace({
              path: "/order_confirm",
              query: {new: 1, cartId: res.data.cart_id.join(',')}
            });
          });
      },
      // 选项卡
      bindTab(status){
        this.orderStatus = status;
        this.page = 1
        this.$set(this, 'orderList', []);
        if(status == 0) {
          this.getUnPayList();
        }else{
            this.getList();
        }
      },
      // 获取订单个数
      getNumber() {
        this.$axios.get('/api/order/number').then(res => {
            this.orderData = res.data;
        //   for (var i in res.data) {
        //     this.tabList.forEach(tab => {
        //       if (i == tab.numberName) {
        //         tab.num = res.data[i]
        //       }
        //     })
        //   }
        })
      },
      // 获取订单列表
      getList() {
        this.$axios.get('/api/order/list',{
          params:{
            status:this.orderStatus-1,
            page:this.page,
            limit:this.limit
          }
        }).then(res => {
          this.orderList = res.data.list
          this.total = res.data.count
        })
      },
      //待付款订单列表
      getUnPayList(){
        this.$axios.get('/api/order/group_order_list',{
          params:{
            page:this.page,
            limit:this.limit
          }
        }).then(res => {
          this.orderList = res.data.list
          this.total = res.data.count
        })
      },
      // 取消订单
      cancelOrder(item,index){
        MessageBox.confirm(this.$t('page.index.surecancelorder'),this.$t('message.login.prompt')).then(res=>{
          this.$axios.post('/api/order/cancel/'+item.group_order_id).then(data=>{
            this.getUnPayList()
            this.getNumber()
            return Message.success(data.message)
          })
        })
      },
      // 查看详情
      goDetail(item){
        if(this.orderStatus === 0){
            this.$router.push({
                path: `/order_stay_detail`,
                query:{
                    orderId:item.group_order_id
                }
            })
        }else{
            this.$router.push({
                path: `/order_detail`,
                query:{
                    orderId:item.order_id
                }
            })
        }

      },
      // 去评价
      goEvaluation(item){
        this.$router.push({
          path: `/evaluation`,
          query:{
            unique:item.unique
          }
        })
      },
      // 去退款
      goRefound(item){
        this.$router.push({
          path: `/refund_confirm`,
          query:{
            orderId:item.order_id
          }
        })
      },
      // 去物流
      goLogistics(item){
        this.$router.push({
          path: `/logistics`,
          query:{
            orderId:item.order_id
          }
        })
      },
      // 确认收货
      confirmOrder(item, index){
          let that = this;
          MessageBox.confirm(this.$t('page.index.tips3'),this.$t('message.login.prompt')).then(res=>{
            this.$axios.post('/api/order/take/'+item.order_id).then(data=>{
                that.orderList.splice(index, 1);
                that.getNumber();
                that.getList();
                return Message.success(data.message)
            })
        })
      },
      // 分页点击
      bindPageCur(data){
        this.page = data
        if(this.orderStatus == 0){
            this.getUnPayList();
        }else{
            this.getList()
        }
      },
      // 立即支付
      goBuy(item){
        this.$router.push({
          path:'/payment',
          query:{
            result:item.group_order_id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .MyOrder{
      height: 35px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      padding: 0 20px;
      background-color: #eee;
      border-radius: 5px;
      color: #999;
    }
  .user-com-tab {
    .item {
      padding: 0 10px;
    }
  }
  .user-order-list {
    li {
      position: relative;
      padding: 30px 0 26px;
      border-bottom: 1px solid #ECECEC;
      .refund-icon{
        position: absolute;
        right: 50px;
        top: 40px;
      }
      .bd {
        padding-right: 40px;
        border-bottom: 1px dashed #E1E1E1;
        cursor: pointer;
        .order-txt {
          color: #282828;
          font-size: 14px;
          .mer_name{
            display: inline-block;
            margin-left: 40px;
            color: #666666;
            &:hover{
              color: #E93323;
            }
          }
          .status {
            float: right;
            color: #f89900;
          }
        }
        .content {
          margin-top: 20px;
          .goods-item {
            display: flex;
            position: relative;
            margin-bottom: 20px;
            align-items: center;
            .img-box {
              width: 120px;
              height: 120px;
              position: relative;
              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
                line-height: 18px;
                background: rgba(0,0,0,.5);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
              }
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .info-txt {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 500px;
              margin-left: 24px;
              font-size: 14px;
              .info{
                font-size: 12px;
                color: #aaa;
                margin-top: 4px;
              }
              .price {
                margin-top: 10px;
                color: #E93323;
              }

            }
            .develity_date{
              color: #FD6523;
              margin-top: 6px;
              font-size: 14px;
            }
            .num {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: #999999;
              }
          }
        }
      }
      .foot {
        padding-top: 26px;
        padding-right: 32px;
        p {
          text-align: right;
          color: #666;
          font-size: 14px;
          .price {
            color: #E93323;
          }
        }
        .btn-wrapper {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
          div {
            width: 110px;
            height: 36px;
            text-align: center;
            line-height: 34px;
            margin-left: 20px;
            border: 1px solid #999999;
            border-radius: 4px;
            font-size: 14px;
            color: #666666;
            cursor: pointer;
            &.pay {
              border-color: #f89900;
              background: #f89900;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .pages-box{
    margin-top: 30px;
    text-align: right;
  }
</style>
